<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- meta:desc -->
  <meta name="description" content="儿童心理疗愈平台">
  <!-- meta:kw -->
  <meta name="keywords" content="儿童心理疗愈平台">
  <title>儿童心理疗愈平台</title>
  <!-- link:favicon -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#" class="login">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1><a href="#">儿童心理疗愈平台</a></h1>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="main.html">首页</a></li>
        <li><a href="student.html">学生端</a></li>
        <li><a href="index.html">家长端</a></li>
        <li><a href="asker.html">心理咨询</a></li>
      </ul>
    </div>
    <!-- 搜索 -->
    <!-- <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">
    </div> -->
    <!-- 购物车 -->
    <!-- <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div> -->
  </div>

  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- 图片 -->
      <ul class="pic">
        <div  class="carousel" >
          <li><a href="#"><img src="./uploads/main1.jpg" alt="" class="active"></a></li>
          <li><a href="#"><img src="./uploads/main2.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/main3.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/main4.jpg" alt=""></a></li>
          <li><a href="#"><img src="./uploads/main5.jpg" alt=""></a></li>
        </div>
      </ul>
    </div>
  </div>

 <!-- 彩色方框 -->
  <div class="color-boxes wrapper">
    <div class="color-box box1">海量绘本，心灵富矿</div>
    <div class="color-box box2">亲子共融，家本疗愈</div>
    <div class="color-box box3">精准定制，专属护航</div>
    <div class="color-box box4">专家领航，专业筑底</div>
    <div class="color-box box5">随身便携，畅享自由</div>
  </div>


  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    
    
      <div class="right">
    <!-- 标题 -->
    <div class="title">
      
      <div class="left">
        <h3>精选图书</h3>
      </div>
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <img src="./uploads/book5.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/book6.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/book7.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/book8.png" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="recommend wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h3>育儿贴士</h3>
      </div>
    </div>
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <img src="./uploads/yuer1.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/yuer2.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/yuer3.png" alt="">
          </a>
        </li>
        <li><a href="#"><img src="./uploads/yuer4.png" alt=""></a></li>
      </ul>
    </div>
  </div>
  <!-- 最新专题 -->
  <div class="topic wrapper">
    <div class="title">
      <div class="left">
        <h3>心理课程</h3>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <div class="topic-bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/video1.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4>做情绪的主人</h4>
                  <p>中山大学</p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/video2.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4> 调控情绪 塑造阳光心态（第一讲）  </h4>
                  <p>清华大学</p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic">
              <img src="./uploads/video3.png" alt="">
              <!-- 定位区域 -->
              <div class="cover">
                <div class="left">
                  <h4> 调控情绪 塑造阳光心态（第二讲）  </h4>
                  <p>清华大学</p>
                </div>
              </div>
            </div>
            <div class="txt">
              <div class="left">
                <p>
                  <i class="iconfont icon-favorites-fill"></i>
                  <span>1220</span>
                </p>
                <p>
                  <i class="iconfont icon-browse"></i>
                  <span>1800</span>
                </p>
              </div>
              <div class="right">
                <p>
                  <i class="iconfont icon-comment"></i>
                  <span>246</span>
                </p>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <div class="wrapper">
      <!-- 服务 -->
      <!-- <div class="service">
        <ul>
          <li>
            <h5></h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5></h5>
            <p>物流快捷</p>
          </li>
          <li>
            <h5></h5>
            <p>品质新鲜</p>
          </li>
          <li>
            <h5></h5>
            <p>售后无忧</p>
          </li>
          
        </ul>
      </div> -->
      <!-- 帮助中心 -->
      <div class="help">
        <div class="left">
          <dl>
            <dt>资源中心</dt>
            <dd><a href="#">绘心指南</a></dd>
            <dd><a href="#">家长学堂</a></dd>
            <dd><a href="#">专家讲座</a></dd>
          </dl>
          <dl>
            <dt>心灵守护</dt>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">在线客服</a></dd>
            <dd><a href="#">客服电话</a></dd>
          </dl>
          <dl>
            <dt>参与我们</dt>
            <dd><a href="#">志愿活动</a></dd>
            <dd><a href="#">合作伙伴</a></dd>
            <dd><a href="#">捐款支持</a></dd>
          </dl>
          <dl>
            <dt>法律政策</dt>
            <dd><a href="#">隐私政策</a></dd>
            <dd><a href="#">使用条款</a></dd>
            <dd><a href="#">版权说明</a></dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
            <dd><a href="#">客服电话 400-0000-000</a></dd>
            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
          </dl>
        </div>
        <div class="right">
          <ul>
            <li>
              <div class="pic"><img src="./images/wechat1.jpg" alt=""></div>
              <p>找对象扫一扫</p>
            </li>
            <li>
              <div class="pic"><img src="./images/wechat2.jpg" alt=""></div>
              <p>售后服务</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 版权 -->
      <div class="copyright">
        <p>
          <a href="#">关于我们</a>|
          <a href="#">帮助中心</a>|
          <a href="#">售后服务</a>|
          <a href="#">商务合作</a>|
          <a href="#">搜索推荐</a>|
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 儿童心理疗愈平台</p>
      </div>
    </div>
  </div>
  <script>
    let currentIndex = 0;
    const images = document.querySelectorAll('.carousel img');
    const totalImages = images.length;
  
    function showNextImage() {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % totalImages;
      images[currentIndex].classList.add('active');
    }
  
    setInterval(showNextImage, 3000); // 每3秒切换一次图片
  </script>
</body>
</html>